<template>
  <FModal ref="FModal" width="900" body-height="600" @ok="addUserTask"
          @fullscreenChange="fullscreenChange">
    <template v-slot:header>
      <el-tabs v-model="activePage" class="user-selector-modal-header">
        <el-tab-pane label="最近" name="last"></el-tab-pane>
        <el-tab-pane label="单位" name="unit"></el-tab-pane>
        <el-tab-pane label="部门" name="depart"></el-tab-pane>
        <el-tab-pane label="组" name="group"></el-tab-pane>
        <el-tab-pane label="岗位" name="position"></el-tab-pane>
        <el-tab-pane label="相对角色" name="relativeRole"></el-tab-pane>
        <el-tab-pane label="表单控件" name="formField"></el-tab-pane>
        <el-tab-pane label="角色" name="role"></el-tab-pane>
      </el-tabs>
    </template>

    <FPage style="display: flex">
        <div class="user-selector-modal-body-left" :class="{'scroll-body': !fullscreen}">
          <LastUserList v-show="'last' === activePage" ref="LastUserList" @create="createUserConfig"/>
          <UnitList v-show="'unit' === activePage" ref="UnitList" @create="createUserConfig"/>
          <DepartUserList v-show="'depart' === activePage" ref="DepartUserList" @create="createUserConfig"/>
          <GroupList v-show="'group' === activePage" ref="GroupList" @create="createUserConfig"/>
          <PositionList v-show="'position' === activePage" ref="PositionList" @create="createUserConfig"/>
          <RelativeList v-show="'relativeRole' === activePage" ref="RelativeList" @create="createUserConfig"/>
          <RoleList v-show="'role' === activePage" ref="RoleList" @create="createUserConfig"/>
        </div>

        <div class="user-selector-modal-body-center"></div>

        <div class="user-selector-modal-body-right" :class="{'scroll-body': !fullscreen}">
          <FList @select="userConfigSelectChange" @doubleClick="doubleClick"
                 :selected-key="selectedKey" size="small" :data-source="userConfigs"
                 title-name="configName">
            <template v-slot:default="{item}">
              <div>
                {{ item.configName }}
              </div>
            </template>
          </FList>
        </div>
    </FPage>
  </FModal>
</template>

<script>
import FModal from '@/components/FModal';
import LastUserList from '@/components/UserSelectorModal/LastUserList';
import FList from '@/components/FList';
import {isEmpty} from '@/utils/CommonUtils';
import UnitList from '@/components/UserSelectorModal/UnitList';
import DepartUserList from '@/components/UserSelectorModal/DepartUserList';
import GroupList from '@/components/UserSelectorModal/GroupList';
import PositionList from '@/components/UserSelectorModal/PositionList';
import RelativeList from '@/components/UserSelectorModal/RelativeList';
import RoleList from '@/components/UserSelectorModal/RoleList';
import FPage from '@/components/layout/FPage.vue';

export default {
  name: "UserSelectorModal",
  components: {
    FPage,
    FList,
    FModal,
    UnitList,
    DepartUserList,
    GroupList,
    PositionList,
    RelativeList,
    RoleList,
    LastUserList
  },
  data() {
    return {
      activePage: 'last',
      fullscreen: false,
      selectedKey: undefined,
      userConfigs: [],
    };
  },
  methods: {
    setData(userConfigs) {
      if (!userConfigs) userConfigs = [];
      this.userConfigs = userConfigs;
      this.open();
    },
    close() {
      this.$refs.FModal.close();
    },
    userConfigSelectChange(userConfig) {
      this.selectedKey = userConfig.id;
    },
    doubleClick(userConfig) {
      let index = this.userConfigs.findIndex(u => u.id === userConfig.id);
      if (index !== -1) {
        this.userConfigs.splice(index, 1);
      }
    },
    createUserConfig(userConfig) {
      if (this.selected(userConfig)) {
        this.$message.warning(`${userConfig.configName}已添加, 请勿重复选择`);
        return;
      }
      this.userConfigs.push(userConfig);
    },
    selected(userConfig) {
      let list = this.userConfigs;
      if (!list) list = [];
      for (let i = 0; i < list.length; i++) {
        if (this.isEquals(list[i], userConfig)) {
          return true;
        }
      }
      return false;
    },
    isEquals(config1, config2) {
      if (isEmpty(config1.type) || isEmpty(config2.type)) return false;
      if (config1.type !== config2.type) return false;
      let type = config1.type;
      if (type === 'user') return config1.userId === config2.userId;
      if (type === 'unit') return config1.unitId === config2.unitId;
      if (type === 'role') return config1.roleId === config2.roleId && config1.unitId === config2.unitId;
      if (type === 'group') return config1.groupId === config2.groupId;
      if (type === 'position') return config1.positionId === config2.positionId && config1.unitId === config2.unitId;
      if (type === 'relativeRole') return config1.relativeType === config2.relativeType;
      if (type === 'formField') return config1.formFieldName === config2.formFieldName;
    },
    open() {
      this.$refs.FModal.open();
      this.activePage = 'last';
    },
    fullscreenChange(fullscreen) {
      this.fullscreen = fullscreen;
    },
    addUserTask() {
      if (!this.userConfigs || this.userConfigs.length <= 0) {
        this.$message.warning('请添加用户');
        return;
      }
      this.$emit('selectedUsers', this.userConfigs);
    }
  }
};
</script>

<style scoped>

</style>

<style>
.user-selector-modal-header {
  height: calc(100% - -6px);
  padding: 0;
  width: 100%;
}

.user-selector-modal-header .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

.user-selector-modal-body {
  display: flex;
}

.user-selector-modal-body-right,
.user-selector-modal-body-left {
  flex: 0.5;
  height: 100%;
  border: 1px solid rgb(220, 223, 230);
  box-sizing: border-box;
}

.user-selector-modal-body-right {
}

.user-selector-modal-body-left {
  overflow: auto;
}

.user-selector-modal-body-center {
  width: 10px;
}

.user-selector-modal-body .scroll-body {
  height: 650px;
  overflow: auto;
}
</style>
